<template>
  <div>
    <!-- content1 start -->
    <div
      id="content"
      style="height: 1200px;"
      v-loading="loading"
      element-loading-text="稍等片刻"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    ></div>
  </div>
  <!-- content1 end -->
</template>

<script>
import { mapActions, mapState } from "vuex";

export default {
  data() {
    return {
      loading: true,
    };
  },
  // 清空计时器，传递计时器唯一标识符（自定义
  created() {
    setTimeout(() => {
      this.findData();
    }, 5000);
  },
  computed: {
    ...mapState("dataList", ["dataList"]),
  },
  methods: {
    ...mapActions("dataList", ["page_query"]),
    findData() {
      this.page_query({ page: 1, pageSize: 10 }).then(() => {
        let res1 = this.dataList.list.map((item) => {
          return item.severe;
        });
        let res2 = this.dataList.list.map((item) => {
          return item.dead;
        });
        let res3 = this.dataList.list.map((item) => {
          return item.cure;
        });
        let res4 = this.dataList.list.map((item) => {
          return item.province;
        });
        this.initEchart(res1, res2, res3, res4);
      });
    },
    initEchart(res1, res2, res3, res4) {
      echarts.init(document.getElementById("content")).dispose();
      var myChart = echarts.init(document.getElementById("content"));
      var option = {
        angleAxis: {},
        radiusAxis: {
          type: "category",
          data: res4,
        },
        polar: {},
        series: [
          {
            type: "bar",
            data: res1,
            coordinateSystem: "polar",
            name: "确诊人数",
            stack: "a",
          },
          {
            type: "bar",
            data: res3,
            coordinateSystem: "polar",
            name: "治愈人数",
            stack: "a",
          },
          {
            type: "bar",
            data: res2,
            coordinateSystem: "polar",
            name: "死亡人数",
            stack: "a",
          },
        ],
        legend: {
          show: true,
          data: ["确诊人数", "治愈人数", "死亡人数"],
        },
      };
      myChart.setOption(option);
    },
  },
};
</script>